<script setup lang="ts">
import { markRaw, toRaw, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getTodoStats } from "@/api/ads";
import { ElMessage } from "element-plus";
import { Plus, Refresh, ArrowRight, TrendCharts, Monitor } from "@element-plus/icons-vue";
import ReCol from "@/components/ReCol";
import { useI18n } from "vue-i18n";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { hasPerms } from "@/utils/auth";

const { t } = useI18n();

defineOptions({
  name: "Welcome"
});

const router = useRouter();

// 待办事项数据
const todoStats = ref({
  recharge_apply_pending: 0,
  clear_apply_pending: 0,
  total_pending: 0
});

const loading = ref(false);

// 获取待办事项统计数据
async function fetchTodoStats() {
  // 检查是否有任何待办事项权限
  const hasRechargePermission = hasPerms(['assets:btn:recharge_process']);
  const hasClearPermission = hasPerms(['assets:btn:process_clear_apply']);

  if (!hasRechargePermission && !hasClearPermission) {
    return; // 没有任何权限，不需要调用API
  }

  loading.value = true;
  try {
    const { data } = await getTodoStats();
    todoStats.value = data;
  } catch (error) {
    ElMessage.error("获取待办事项数据失败");
    console.error("获取待办事项统计失败:", error);
  } finally {
    loading.value = false;
  }
}

// 检查是否有任何待办事项权限
const hasAnyTodoPermission = () => {
  return hasPerms(['assets:btn:recharge_process']) || hasPerms(['assets:btn:process_clear_apply']);
};

// 检查是否有任何快捷操作权限
const hasAnyQuickActionPermission = () => {
  return hasPerms(['assets:btn:add_record']) || hasPerms(['assets:btn:create_charge_apply']);
};

// 跳转到指定页面
function navigateTo(path: string) {
  router.push(path);
}

onMounted(() => {
  fetchTodoStats();
});
</script>

<template>
  <div>
    <el-row :gutter="15" justify="space-around">
      <!-- 左边 - 待办事项和其他功能 -->
      <re-col
        v-motion
        class="mb-[18px]"
        :value="14"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{ opacity: 0, y: 100 }"
        :enter="{opacity: 1, y: 0, transition: { delay: 80 * 1 } }"
      >
        <!-- 待办事项 -->
        <el-card  class="bar-card mb-[15px]" shadow="never">
          <div class="flex justify-between items-center mb-4">
            <span class="text-md font-medium">待办事项</span>
            <el-button text size="small" @click="fetchTodoStats">
              <template #icon>
                <el-icon><Refresh /></el-icon>
              </template>
              刷新
            </el-button>
          </div>

          <!-- 空状态 -->
          <div class="placeholder-area" v-if="todoStats.clear_apply_pending+todoStats.recharge_apply_pending==0">
            <div class="placeholder-content">
              <el-icon size="48" color="#ddd">
                <TrendCharts />
              </el-icon>
              <p class="placeholder-text">暂无待办事项</p>
            </div>
          </div>

          <el-row :gutter="12">
            <!-- 账号充值申请 -->
            <re-col
              v-if="hasPerms(['assets:btn:recharge_process'])&&todoStats.recharge_apply_pending>0"
              :value="12"
              :md="24"
              :sm="24"
              :xs="24"
            >
              <div
                class="todo-item"
                v-motion
                :initial="{ opacity: 0, x: -50 }"
                :enter="{opacity: 1, x: 0, transition: { delay: 100 } }"
                @click="navigateTo('/assets/ad-recharge-apply?state=1')"
              >
                <div class="todo-icon recharge-icon">
                  <el-icon size="20">
                    <svg viewBox="0 0 1024 1024">
                      <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L512 600.192z"/>
                    </svg>
                  </el-icon>
                </div>
                <div class="todo-content">
                  <p class="todo-count">{{ todoStats.recharge_apply_pending }}</p>
                  <p class="todo-title">账号充值申请</p>
                </div>
                <div class="todo-action">
                  <el-icon size="16" color="#409eff">
                    <ArrowRight />
                  </el-icon>
                </div>
              </div>
            </re-col>

            <!-- 账号清零申请 -->
            <re-col
              v-if="hasPerms(['assets:btn:process_clear_apply'])&&todoStats.clear_apply_pending>0"
              :value="12"
              :md="24"
              :sm="24"
              :xs="24"
            >
              <div
                class="todo-item"
                v-motion
                :initial="{ opacity: 0, x: -50 }"
                :enter="{opacity: 1, x: 0, transition: { delay: 200 } }"
                @click="navigateTo('/assets/ad-clear-apply?state=1')"
              >
                <div class="todo-icon clear-icon">
                  <el-icon size="20">
                    <svg viewBox="0 0 1024 1024">
                      <path fill="currentColor" d="M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"/>
                    </svg>
                  </el-icon>
                </div>
                <div class="todo-content">
                  <p class="todo-count">{{ todoStats.clear_apply_pending }}</p>
                  <p class="todo-title">账号清零申请</p>
                </div>
                <div class="todo-action">
                  <el-icon size="16" color="#f56c6c">
                    <ArrowRight />
                  </el-icon>
                </div>
              </div>
            </re-col>
          </el-row>
        </el-card>

        <!-- 快捷功能区域 -->
        <el-card v-if="hasAnyQuickActionPermission()" class="bar-card" shadow="never">
          <div class="flex justify-between mb-4">
            <span class="text-md font-medium">快捷功能</span>
          </div>

          <el-row :gutter="12">
            <!-- 填写消耗记录 -->
            <re-col
              v-if="hasPerms(['assets:btn:add_record'])"
              :value="hasPerms(['assets:btn:create_charge_apply']) ? 12 : 24"
              :md="24"
              :sm="24"
              :xs="24"
            >
              <div
                class="quick-action-item"
                v-motion
                :initial="{ opacity: 0, x: -50 }"
                :enter="{opacity: 1, x: 0, transition: { delay: 100 } }"
                @click="navigateTo('/assets/ad-consumption')"
              >
                <div class="quick-action-icon consumption-icon">
                  <el-icon size="20">
                    <svg viewBox="0 0 1024 1024">
                      <path fill="currentColor" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"/>
                      <path fill="currentColor" d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"/>
                    </svg>
                  </el-icon>
                </div>
                <div class="quick-action-content">
                  <p class="quick-action-title">填写消耗记录</p>
                  <p class="quick-action-desc">记录广告消耗情况</p>
                </div>
                <div class="quick-action-arrow">
                  <el-icon size="16" color="#409eff">
                    <ArrowRight />
                  </el-icon>
                </div>
              </div>
            </re-col>

            <!-- 申请充值 -->
            <re-col
              v-if="hasPerms(['assets:btn:create_charge_apply'])"
              :value="hasPerms(['assets:btn:add_record']) ? 12 : 24"
              :md="24"
              :sm="24"
              :xs="24"
            >
              <div
                class="quick-action-item"
                v-motion
                :initial="{ opacity: 0, x: -50 }"
                :enter="{opacity: 1, x: 0, transition: { delay: 200 } }"
                @click="navigateTo('/assets/ad-recharge-apply')"
              >
                <div class="quick-action-icon recharge-action-icon">
                  <el-icon size="20">
                    <svg viewBox="0 0 1024 1024">
                      <path fill="currentColor" d="M621.254 228.75L527.607 322.397a31.996 31.996 0 0 1-45.254 0L388.746 228.75A31.996 31.996 0 0 1 434 196.75h-82C136.75 196.75 31.996 301.504 31.996 516.754A31.996 31.996 0 0 1 96 548.75C309.504 548.75 434 423.254 434 196.75h156a31.996 31.996 0 0 1 22.627 9.373l93.647 93.647a31.996 31.996 0 0 1-22.627 54.627H621.254z"/>
                      <path fill="currentColor" d="M768 352a32 32 0 1 1 64 0v480a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V352a32 32 0 0 1 64 0v448h544V352z"/>
                      <path fill="currentColor" d="M384 640h256q32 0 32 32t-32 32H384q-32 0-32-32t32-32zm0-192h256q32 0 32 32t-32 32H384q-32 0-32-32t32-32z"/>
                    </svg>
                  </el-icon>
                </div>
                <div class="quick-action-content">
                  <p class="quick-action-title">申请充值</p>
                  <p class="quick-action-desc">提交账号充值申请</p>
                </div>
                <div class="quick-action-arrow">
                  <el-icon size="16" color="#67c23a">
                    <ArrowRight />
                  </el-icon>
                </div>
              </div>
            </re-col>
          </el-row>
        </el-card>

      </re-col>

      <!-- 右边 - 数据统计 -->
      <re-col
        v-motion
        class="mb-[18px]"
        :value="10"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{ opacity: 0, y: 100 }"
        :enter="{opacity: 1, y: 0, transition: { delay: 300 }}"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">数据统计</span>
          </div>
          <div class="placeholder-area">
            <div class="placeholder-content">
              <el-icon size="48" color="#ddd">
                <TrendCharts />
              </el-icon>
              <p class="placeholder-text">统计图表开发中...</p>
            </div>
          </div>
        </el-card>

        <el-card class="bar-card mt-[15px]" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">系统信息</span>
          </div>
          <div class="placeholder-area">
            <div class="placeholder-content">
              <el-icon size="48" color="#ddd">
                <Monitor />
              </el-icon>
              <p class="placeholder-text">系统监控开发中...</p>
            </div>
          </div>
        </el-card>

      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}

.font-medium {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #c6d9f1;
  }

  &:last-child {
    margin-bottom: 0;
  }

  .todo-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 12px;
    flex-shrink: 0;

    &.recharge-icon {
      background: linear-gradient(135deg, #67c23a, #85ce61);
    }

    &.clear-icon {
      background: linear-gradient(135deg, #f56c6c, #f78989);
    }
  }

  .todo-content {
    flex: 1;
    min-width: 0;

    .todo-count {
      font-size: 24px;
      font-weight: bold;
      color: #409eff;
      margin: 0 0 4px 0;
      line-height: 1;
    }

    .todo-title {
      font-size: 14px;
      color: #606266;
      margin: 0;
      line-height: 1.2;
    }
  }

  .todo-action {
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }

  &:hover .todo-action {
    opacity: 1;
  }
}

.quick-action-item {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #c6d9f1;
  }

  &:last-child {
    margin-bottom: 0;
  }

  .quick-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 12px;
    flex-shrink: 0;

    &.consumption-icon {
      background: linear-gradient(135deg, #409eff, #66b3ff);
    }

    &.recharge-action-icon {
      background: linear-gradient(135deg, #67c23a, #85ce61);
    }
  }

  .quick-action-content {
    flex: 1;
    min-width: 0;

    .quick-action-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin: 0 0 4px 0;
      line-height: 1.2;
    }

    .quick-action-desc {
      font-size: 12px;
      color: #909399;
      margin: 0;
      line-height: 1.2;
    }
  }

  .quick-action-arrow {
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }

  &:hover .quick-action-arrow {
    opacity: 1;
  }
}

.placeholder-area {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder-content {
    text-align: center;

    .placeholder-text {
      font-size: 14px;
      color: #c0c4cc;
      margin: 12px 0 0 0;
    }
  }
}
</style>
